import React, { useContext } from "react";
import classes from "./Card.module.css";
import ThemeContext from "../../store/themeContext";
export default function Card(props) {
    const { theme } = useContext(ThemeContext);
    let { item } = props;
    return (
        <li
            onClick={() => props.handleClick(item.name)}
            style={{ width: props.width, padding: props.padding, backgroundColor: theme !== "light" && !item.check && "#000" }}
            className={`${classes.li} ${item.check && classes.active}`}
        >
            <div className={props.column && classes.top}>
                {props.children}
                <p className={classes.p}>{item.name}</p>
            </div>
            {props.flag && (
                <div className={classes.bottom} style={{ color: theme !== "light" && !item.check && "rgb(130, 130, 130)" }}>
                    <p>$</p>
                    <span>1800.00</span>
                </div>
            )}
        </li>
    );
}
